<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { FormSchema } from '@/components/Form'
import { Table, TableColumn } from '@/components/Table'
import { Search } from '@/components/Search'

import { useSearch } from '@/hooks/web/useSearch'
import { useTable } from '@/hooks/web/useTable'
import { ref, reactive, unref, computed } from 'vue'
import { ElDatePicker, ElInput } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'
import { GetAdvertisingTotalApi } from '@/api/user'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
const { t } = useI18n()

//formSchema
const { searchRegister, searchMethods } = useSearch()
const { getFormData: getSearchFormData, setValues: setSearchFormData } = searchMethods

const schema = computed<FormSchema[]>(() => [
  {
    field: 'Time',
    label: '最近登录',
    component: 'DatePicker',
    formItemProps: {
      slots: {
        default: (formData) => {
          const times = computed({
            get: () => {
              if (formData.beginTime && formData.endTime) {
                return [formData.beginTime, formData.endTime]
              } else {
                return []
              }
            },
            set: (times) => {
              if (times) {
                formData.beginTime = times[0]
                formData.endTime = times[1]
              } else {
                formData.beginTime = undefined
                formData.endTime = undefined
              }
            }
          })
          return (
            <ElDatePicker
              v-model={times.value}
              type="daterange"
              valueFormat="YYYY-MM-DD"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              placeholder="选择日期范围"
            />
          )
        }
      }
    }
  },
  {
    field: 'advertisingNum',
    label: '观看广告条数',
    component: 'Input',
    formItemProps: {
      slots: {
        default: (formData) => {
          return (
            <div>
              <ElInput
                v-model={formData.beginAdvertisingNum}
                placeholder="开始广告数量"
                style={{ width: '150px' }}
              />
              <span style={{ margin: '0 10px' }}>至</span>
              <ElInput
                v-model={formData.endAdvertisingNum}
                placeholder="结束广告数量"
                style={{ width: '150px' }}
              />
            </div>
          )
        }
      }
    }
  }
])

//Table
const { tableRegister, tableMethods, tableState } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const searchFormData = await getSearchFormData()
    const { data, count } = await GetAdvertisingTotalApi({
      pageNo: unref(currentPage),
      pageSize: unref(pageSize),
      recordId: userStore.getAppId,
      ...searchFormData
    })
    return {
      list: data,
      total: count
    }
  }
})

const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList } = tableMethods
const isShow = ref(false)
const curItemIndex = ref(1)

const isShowUserName = (row: any) => {
  curItemIndex.value = row.userId
  isShow.value = true
  setTimeout(() => {
    isShow.value = false
  }, 30000)
}
const columns = reactive<TableColumn[]>([
  {
    field: 'index',
    label: t('tableDemo.index'),
    type: 'index'
  },
  {
    field: 'userName',
    label: '用户名称'
  },
  {
    field: 'userCode',
    label: '用户ID',
    slots: {
      default: ({ row }) => {
        return (
          <div>
            {curItemIndex.value === row.userId && isShow.value ? (
              row.userCode
            ) : (
              <span style={'color:blue'} onClick={() => isShowUserName(row)}>
                点击查看
              </span>
            )}
          </div>
        )
      }
    }
  },

  {
    field: 'advertisingNum',
    label: '观看广告条数'
  },

  {
    field: 'loginTime',
    label: '最近登录'
  },
  {
    field: 'registerTime',
    label: '注册时间'
  }
])

const handleReset = () => {
  setSearchFormData({
    beginTime: undefined,
    endTime: undefined,
    beginAdvertisingNum: undefined,
    endAdvertisingNum: undefined
  })
  getList()
}
</script>

<template>
  <ContentWrap title="广告条数筛选">
    <Search :schema="schema" @register="searchRegister" @search="getList" @reset="handleReset" />
    <Table
      v-model:pageSize="pageSize"
      v-model:currentPage="currentPage"
      :columns="columns"
      :data="dataList"
      row-key="id"
      :loading="loading"
      sortable
      headerAlign="center"
      align="center"
      :pagination="{
        total: total
      }"
      @register="tableRegister"
    />
  </ContentWrap>
</template>
